<template>
	<view class="comment-heading flex--col">
		<view class="comment-category">
			<text>{{commentInfoObj.category}}</text>
		</view>
		<view class="comment-info">
			<text class="text--main-dark">{{commentInfoObj.title}}</text>
			<view class="comment-people flex--row">
				<image src="@/static/comment/people.svg" class="icon" aria-label="出行双方"></image>
				<text class="text--thirdary-dark">{{commentInfoObj.people}}</text>
			</view>
		</view>
		<view class="comment-time flex--row">
			<view class="comment-time-item">
				<text class="text--secondary-dark">碰面时间</text>
				<text class="text--thirdary-dark">{{commentInfoObj.startTime}}</text>
			</view>
			<view class="comment-time-item">
				<text class="text--secondary-dark">结束时间</text>
				<text class="text--thirdary-dark">{{commentInfoObj.endTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {isEmpty} from "@/utils/util.js"
	
	export default{
		props:['commentInfo'],
		computed:{
			commentInfoObj(){
				if(!this.commentInfo || isEmpty(this.commentInfo)){
					return {}
				}
				const startDate = new Date(this.commentInfo.realStartTime)
				const month = startDate.getMonth() + 1
				const day = startDate.getDate()
				
				return {
					title:`记${month}月${day}日${this.commentInfo.routeName}游`,
					people:`${this.commentInfo.name},${this.commentInfo.volunteerName}`,
					category:this.commentInfo.category,
					startTime: this.commentInfo.realStartTime.split(" ")[1],
					endTime:this.commentInfo.realEndTime.split(" ")[1]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 400;
		color:#333;
	}
	
	.comment-heading{
		gap:16px;
		
		
		.comment-category{
			text{
				font-size: 16px;
				font-weight: 600;
				color:#FF8D1A;
				
				padding:4px 8px;
				border-radius: 16px;
				background-color: #db720a26;;
			}
		}
		
		.comment-info{
			width:100%;
			text-align: center;
			
			.comment-people{
				justify-content: center;
				align-items: center;
				margin-top: 6px;
			}
		}
		
		
		.comment-time{
			justify-content: space-around;
		}
		
		.comment-time-item{
			& text{
				display: block;
			}
			
			& text:first-child{
				margin-bottom: 6px;
			}
		}
	}
	
	
</style>